var wxCharts = require('../../utils/wxcharts.js');
var chart = require("../../utils/chart.js");

var app = getApp();
var lineChart = null;
var radarChart = null;
var radarChart1 = null;
var num = null;
Page({

  
  data: {
    
    switchTitle:"按天",

    tabType: 'tab1',
    key: 'tab1',
    conditionList: [{
        title: '枕头',
        id: '1',
        select: true
      },
      {
        title: '四件套',
        id: '2',
        select: false
      },
      {
        title: '被子',
        id: '3',
        select: false
      },
      {
        title: '床单',
        id: '4',
        select: false
      },
      {
        title: '蚊帐',
        id: '5',
        select: false
      }
    ],
    choosedCondition: {
      title: '枕头',
      id: '1'
    },
    conditionVisible: false,

    listData: [{
      "col0":"1",
        "col1": "南极人枕头枕芯高弹星级酒店丝绒安睡枕头数",
        "col2": "39.9",
        "col3": "21,798,987"
      },
      { "col0":"2",
        "col1": "睡眠博士（AiSleep）泰国乳胶枕进口天然乳胶枕",
        "col2": "159",
        "col3": "11,877,700"
      },
      {"col0":"3",
        "col1": "富安娜家纺 枕头芯颈椎决明子草本枕芯 成人枕头",
        "col2": "139",
        "col3": "9,000,788"
      },
      {"col0":"4",
        "col1": "睡眠博士（AiSleep）泰国乳胶枕进口天然乳胶枕",
        "col2": "231",
        "col3": "7,234,123"
      },
      {"col0":"5",
        "col1": "富安娜家纺 枕头芯颈椎决明子草本枕芯 成人枕头",
        "col2": "123",
        "col3": "5,234,122"
      },


    ]
  },
  switchClick: function (event) {
    var status = event.detail.value;    
    this.setData({
      switchTitle: (status ? "按月" : "按天"),



    });
    if(status== "1"){
      chart.draw(this, 'canvas5', {
        // title: {
        //   text: "导购机器人推送商品随时间分布（单位：个/min）",
        //   color: "#333333"
        // },
        xAxis: {
          data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
        },
        series: [
  
          {
            name: "总观看人数",
            category: "line",
            data: [10379, 14305, 11038, 7000, 21408, 12027, 37803, 19035]
          },
          {
            name: "自营",
            category: "line",
            data: [302, 904, 2023, 13405, 13053, 9867, 13643, 15795]
          },
          {
            name: "POP",
            category: "line",
            data: [904, 3975, 6738, 4000, 9028, 4047, 5043, 3905]
          }, {
            name: "店铺",
            category: "line",
            data: [904, 3405, 908, 570, 908, 1567, 1563, 1465]
          },
  
        ]
      });
    }else{
      chart.draw(this, 'canvas5', {
        // title: {
        //   text: "导购机器人推送商品随时间分布（单位：个/min）",
        //   color: "#333333"
        // },
        xAxis: {
          data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
        },
        series: [
  
          {
            name: "总观看人数",
            category: "line",
            data: [379, 435, 438, 300, 848, 527, 1183, 735]
          },
          {
            name: "自营",
            category: "line",
            data: [12, 24, 123, 345, 453, 367, 643, 495]
          },
          {
            name: "POP",
            category: "line",
            data: [34, 175, 238, 100, 228, 247, 543, 395]
          }, {
            name: "店铺",
            category: "line",
            data: [34, 75, 38, 10, 28, 47, 63, 55]
          },
  
        ]
      });
    }
    

  },

  showCondition() {
		this.setData({
			conditionVisible: !this.data.conditionVisible
		})
	},
	// 改变查询项
	onChnageCondition(e) {
		const list = this.data.conditionList
		list.forEach(item => {
			if (item.id === e.currentTarget.dataset.id) {
				item.select = true
				this.setData({
					'choosedCondition.title': item.title,
					'choosedCondition.id': item.id
				})
			} else {
				item.select = false
			}
		})
		this.setData({
			conditionList: list
		})
	},
  touchHandler: function (e) {
    num = radarChart.getCurrentDataIndex(e)
    console.log(num);
    if (num == '2') {
      this.setData({
        listData: [{"col0":"1",
            "col1": "奥罗玛斯 低枕头薄枕低枕矮枕头软枕扁枕芯颈椎枕护颈枕学生枕成人低薄记忆枕头睡眠枕  ",
            "col2": "98.3",
            "col3": "758,987"
          },
          {"col0":"2",
            "col1": "南极人NanJiren 全棉枕套+枕头组合装 酒店枕头家用枕头芯柔软学生枕芯",
            "col2": "119",
            "col3": "577,700"
          },
          {"col0":"3",
            "col1": "双漫荞麦皮散装荞麦枕头护颈椎枕头芯荞麦壳枕芯填充物 散装甜荞麦壳 枕芯袋",
            "col2": "239",
            "col3": "200,788"
          },
          {"col0":"4",
            "col1": "北极绒 枕芯全棉荞麦枕头 颈椎枕 纯棉面料枕头芯单人 花草枕全荞麦壳填充",
            "col2": "51",
            "col3": "7,234,123"
          },
          {"col0":"5",
            "col1": "富安娜家纺 枕头芯颈椎决明子草本枕芯 成人枕头",
            "col2": "123",
            "col3": "5,234,122"
          },


        ]
      })
    }

    if (num == '3') {
      this.setData({
        listData: [{"col0":"1",
            "col1": "南极人 枕头家纺 星级酒店羽丝绒枕芯 可水洗枕 饱满舒适48*74cm（单只） ",
            "col2": "54.3",
            "col3": "2,565,765"
          },
          {"col0":"2",
            "col1": "南极人（Nanjiren）枕头枕芯 全棉绣花羽丝绒枕头芯 单人学生成人枕 浅灰 一只装",
            "col2": "79",
            "col3": "346,700"
          },
          {"col0":"3",
            "col1": "皮尔卡丹 五星级酒店羽绒枕一对装 全棉枕头白鹅毛枕头芯单人羽毛枕芯成人整头芯 一对装",
            "col2": "214",
            "col3": "750,348"
          },
          {"col0":"4",
            "col1": "九洲鹿 枕头家纺 决明子枕头 枕芯弹软枕头芯 简妮",
            "col2": "24.6",
            "col3": "2,565,123"
          },
          {"col0":"5",
            "col1": "南极人NanJiren 全棉酒店枕芯一对装 枕头男女成人家用学生单人双人枕芯枕头芯",
            "col2": "67.5",
            "col3": "1,565,122"
          },


        ]
      })
    }
    // console.log(radarChart1.getCurrentDataIndex(e));
  },

  onLoad:function(options){

    chart.draw(this, 'canvas5', {
      // title: {
      //   text: "导购机器人推送商品随时间分布（单位：个/min）",
      //   color: "#333333"
      // },
      xAxis: {
        data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
      },
      series: [

        {
          name: "总观看人数",
          category: "line",
          data: [379, 435, 438, 300, 848, 527, 1183, 735]
        },
        {
          name: "自营",
          category: "line",
          data: [12, 24, 123, 345, 453, 367, 643, 495]
        },
        {
          name: "POP",
          category: "line",
          data: [34, 175, 238, 100, 228, 247, 543, 395]
        }, {
          name: "店铺",
          category: "line",
          data: [34, 75, 38, 10, 28, 47, 63, 55]
        },

      ]
    });
  },

  

  onReady: function (e) {
    var windowWidth = 320;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }

    lineChart = new wxCharts({
      canvasId: 'lineCanvas',
      type: 'line',
      categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '成交量1',
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }],
      yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0
      },
      width: 320,
      height: 200
    });




    radarChart = new wxCharts({

      canvasId: 'radarCanvas',
      type: 'radar',
      categories: ['舒适度', '乳胶', '健康', '进口', '美观', '厚度'],
      series: [{
        name: '行业属性雷达',
        data: [90, 160, 75, 145, 27, 92]
      }],
      width: windowWidth / 2,
      height: 150,
      extra: {
        radar: {
          max: 150
        }
      }
    });
    radarChart1 = new wxCharts({
      canvasId: 'radarCanvas1',
      type: 'radar',
      categories: ['舒适度', '乳胶', '健康', '进口', '美观', '厚度'],
      series: [{
        name: '直播间属性雷达',
        data: [120, 60, 45, 75, 127, 62]
      }],
      width: windowWidth / 2,
      height: 150,
      extra: {
        radar: {
          max: 150
        }
      }
    });
  }
});